import { Tabs, Popover } from 'antd';
const TabPane = Tabs.TabPane;
import * as React from 'react';
import { observer } from 'mobx-react';
import classNames from 'classnames';
import './index.less';
import TaskViewExcel from '../../task/view/page/excel';
import { WeaLocaleProvider } from 'ecCom';
import NewTaskPath from './NewTaskPath';
import { releaseSpread, loadSingle } from '../../../utils/loadSpread';
const getLabel = WeaLocaleProvider.getLabel;
@observer
export default class NewTaskSetting extends React.Component {

    componentDidMount() {
        this.t = loadSingle();
    }

    componentWillUnmount() {
        releaseSpread(this.t);
    }

    onChangePage = (pageid) => {
        const { store } = this.props;
        const { onChangePage } = store;
        if (typeof onChangePage === 'function') {
            onChangePage(pageid);
        }
    }

    // 周期数值发生变化时触发回调
    onChange(data) {
        var cycle = data["cycle"];
        if (cycle !== undefined) {
            const { store } = this.props;
            const { baseDateHide } = store;
            var value = cycle.value;
            store.updateCondition(false, value);
        }
    }
    render() {
        const { store, params } = this.props;
        const { onChangeTab, excelPages } = store;
        const { form } = store.newTaskDialog;
        const dropdown = <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@n0p1w6`}
            placement="bottomLeft"
            content={
                <ul className="pages-menu">
                    {excelPages.map(page => (
                        <li className={classNames('pages-menu-item', 'text-elli', { active: page.id === store.selectedPage })} title={page.name}>
                            <div className="text-elli" style={{ width: 160 }} onClick={this.onChangePage.bind(this, page.id)}>
                                {page.name}
                            </div></li>
                    ))}
                </ul>
            }
        >
            <span>
                {getLabel('502895', '表格')}
                <i className="icon-coms-down2 down"></i>
            </span>
        </Popover>
        return (
            <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@ejak7b`} className="edc-newTask-tabs" defaultActiveKey='baseinfo' onChange={onChangeTab} size="small">
                <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@f2d90x`} style={{ width: '70%' }} tab={getLabel('502654', '基本信息')} key='baseinfo'>
                    <div className='form'>
                        {form.render({ needTigger: false, col: 1 }, { onChange: this.onChange.bind(this) })}
                    </div>
                </TabPane>
                <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@v25wto`} tab={dropdown} key='page'>
                    <TaskViewExcel ecId={`${this && this.props && this.props.ecId || ''}_TaskViewExcel@3slqal`} store={store.excelPageViewStore} readonly={true}></TaskViewExcel></TabPane>
                <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@pxf13t`} tab={getLabel('506003', '路径')} key='path'><NewTaskPath ecId={`${this && this.props && this.props.ecId || ''}_NewTaskPath@3yfe3a`} params={{ appid: params.appid }} store={store.pathDesignerStore}></NewTaskPath></TabPane>
            </Tabs>
        )
    }
}